<template>
  <div>
    <div class="main">
      <el-card class="logincard">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <div class="input">
            <el-form-item label="账号" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
          </div>
          <el-form-item class="button">
            <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "mregister",
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        email: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'change'}
        ],
        email: [
          {required: false, type: 'email', message: '请输入正确的邮箱', trigger: 'change'}
        ]
      }
    }
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          const _this = this   //_this才指的是vue哈  全局
          //登录请求哈  发送的是ruleForm
          //注意 this的区分
          this.$axios.post('/user/register', this.ruleForm).then(res => {


            //注册成功后给个提醒  并自动登录

            this.$message({
              message: '恭喜你，注册成功',
              type: 'success'
            });

            this.$axios.post('/login', this.ruleForm).then(res => {

              //拿到后端生成的jwt
              //为了让所有组件都能 拿到jwt：需要全局配置  也就是store/index.js
              const jwt = res.headers['authorization']
              const userinfo = res.data.data //后端返回的登录用户信息（不包含密码）

              // 把数据共享出去  方法再store/index.js中  将jwt存放在localStorage
              //固定写法$store.commit   属于vuex的内容
              _this.$store.commit("SET_TOKEN", jwt)
              _this.$store.commit("SET_USERINFO", userinfo)

              // 获取测试   浏览器f12 的 application 的左侧栏
              console.log(_this.$store.getters.getUser)

              //登陆后 push 到主页面
              _this.$router.push("/blogs")

              //这里  有个逻辑没实现  登陆失败  也就是说jwt用户登陆失败
              //所以要加上一个全局的 拦截捕获  并对用户友好提示
              //在axios.js中
            })
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.main {
  margin: auto;
  margin-top: 125px;
  width: 300px;
  height: 200px;
}

.demo-ruleForm {
  position: relative;
  top: 30px;
  right: 35px;
}
.center {
  text-align: center;
}

.register {
  position: relative;
  top:5px;

}
</style>